import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigProvider, Spin } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { store } from './store';
import AppRoutes from './routes';
import { useAuth } from './hooks/useAuth';
import { useSessionManager } from './hooks/useSessionManager';
import './App.css';
import './styles/responsive.css';

// 内部应用组件，用于处理认证状态初始化
const AppContent: React.FC = () => {
  const { loading, isAuthenticated } = useAuth();
  
  // 只有在用户已认证时才启用会话管理
  useSessionManager(isAuthenticated);

  // 如果认证状态正在加载，显示加载指示器
  if (loading) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '100vh' 
      }}>
        <Spin size="large" />
      </div>
    );
  }

  return <AppRoutes />;
};

function App() {
  return (
    <Provider store={store}>
      <ConfigProvider locale={zhCN}>
        <BrowserRouter>
          <AppContent />
        </BrowserRouter>
      </ConfigProvider>
    </Provider>
  );
}

export default App;
